import React, { Component } from 'react'
import { withRouter } from 'react-router';
import {NavBar,Toast} from "antd-mobile";
import {convertData} from "./CategoryTreeDataUtils";
import {Modal} from "antd";
import axios from "../../../../http";
import Qs from 'qs'
import TreesMenu from "./treeMenu.jsx";
import { Button,Input,Form} from 'antd-mobile';
class NoteCategory extends Component {
    constructor(props) {
        super(props);
        this.state={data:[],modalVisible:false,modalEditVisible:false,name:'',parentId:0}; 
    }
    add=() =>{
        let entity={'name':this.state.name,'parentId':this.state.parentId};
        axios.post('api/oa/note/category/add', Qs.stringify({
            requestJson:JSON.stringify(entity)
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{
                let  data=response.data;
                if(data.status==1){
                    this.setState({modalVisible:false})
                    this.loadData();
                    this.showSuccessMessage(data.message)
                }else{
                    this.showErrorMessage(data.message);
                }

            })
            .catch(function (error) {
                console.log(error);
            });

    }
    update=() =>{
        let entity={'name':this.state.name,'parentId':this.state.parentId,id:this.state.id};
        axios.post('api/oa/note/category/update', Qs.stringify({
            requestJson:JSON.stringify(entity)
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{
                let  data=response.data;
                if(data.status==1){
                    this.setState({modalEditVisible:false})
                    this.loadData();
                    this.showSuccessMessage(data.message)
                }else{
                    this.showErrorMessage(data.message);
                }

            })
            .catch(function (error) {
                console.log(error);
            });

    }
    loadData=() =>{
        axios.post('api/oa/note/category/findMyAll', Qs.stringify({
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{

                let  data=response.data

                let list=data.data

                list=convertData(list,0);
                console.log(list)

                this.setState({data:list});
            })
            .catch(function (error) {
                console.log(error);
            });

    }
    showAddModal=(parentId)=>{
        this.setState({modalVisible:true,name:'',parentId:parentId})
    };
    handleCancel = () => {
        this.setState({modalVisible:false,parentId:0})
    };

    showEditModal=(treeNodeData)=>{
        let state={modalEditVisible:true, id:treeNodeData.id, name:treeNodeData.originTitle,parentId:treeNodeData.parentId};
        this.setState(state)
    };

    handleEditCancel = () => {
        this.setState({modalEditVisible:false,parentId:0})
    };
    onRecordChange = (event, key) => {
        console.log('event')
        console.log(event)
        let state={};
        state[key]=event;
        this.setState(state)
    };
    showSuccessMessage (systemMessage){
        // message.success(
        //     <MessageContent>
        //         {systemMessage}
        //     </MessageContent>,
        //     5
        // );
        Toast.show({
            content:  systemMessage,
            afterClose: () => {
                console.log('after')
              },
            
          })
    };
    showErrorMessage (systemMessage){
        // message.error(
        //     <MessageContent>
        //         {systemMessage}
        //     </MessageContent>,
        //     5
        // );
        Toast.show({
            content:  systemMessage,
            afterClose: () => {
                console.log('after')
              },
            
          })
    };

    deleteById(id) {

        axios.post('api/oa/note/category/deleteById', Qs.stringify({
            id:id
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{
                let  data=response.data;
                if(data.status==1){
                    this.loadData();
                    this.showSuccessMessage(data.message)
                }else{
                    this.showErrorMessage(data.message);
                }

            })
            .catch(function (error) {
                console.log(error);
            });

    }

   componentDidMount() {
        this.loadData()
   }

    goBack=()=>{
        
        this.props.history.push({pathname:"/note"})
    }
    render() {
        return (
            <div>
                <Modal
                visible={this.state.modalVisible}
                title="添加"
                onCancel={this.handleCancel}
                footer={[
                    <Button key="back" size="small" onClick={this.handleCancel}>
                        取消
                    </Button>,
                    <Button
                        key="submit"
                        type="primary"
                        size="small"
                        onClick={this.add}
                    >
                        确定
                    </Button>,
                ]}
            >
                <Form>
                       
                            <div>名称:</div>
                            <Input
                                label="名称"
                                placeholder="名称"
                                value={this.state.name}
                                onChange={e => this.onRecordChange(e, 'name')}
                            />
                       

                </Form>

            </Modal>
            <Modal
                visible={this.state.modalEditVisible}
                title="编辑"
                onCancel={this.handleEditCancel}
                footer={[
                    <Button key="back" size="small" onClick={this.handleEditCancel}>
                        取消
                    </Button>,
                    <Button
                        key="submit"
                        type="primary"
                        size="small"
                        onClick={this.update}
                    >
                        确定
                    </Button>,
                ]}
            >
                <Form >
                   
                        <div>名称:</div>
                        <Input
                            label="名称"
                            placeholder="名称"
                            value={this.state.name}
                            onChange={e => this.onRecordChange(e, 'name')}
                        />
                   

                </Form>

            </Modal>

                <NavBar onBack={this.goBack}>笔记类别管理</NavBar>
                {/* <Tree
                            switcherIcon={<DownOutlined />}
                            onSelect={this.categoryOnSelect}
                            selectedKeys={this.state.categorySelectedKeys}
                            treeData={this.state.data}
                /> */}
                <TreesMenu
                    datas={this.state.data}
                    // onselected={item => {
                    //     console.log("选择了树形目录的数据：", item);
                    // }}
                    clickOnAdd={(data)=>{this.showAddModal(data)}}
                    clickOnEdit={(data)=>{this.showEditModal(data)}}
                    clickOnDelete={(data)=>{this.deleteById(data)}}
                ></TreesMenu>
                <Button block shape='rounded' color='primary' onClick={()=>{this.showAddModal(0)}}>
                    添加根类别
                </Button>
            </div>
        )
    }
}
export default withRouter(NoteCategory) 